<template>
  <div class="c-b5knjg">
    <NavBar>
      <template slot="content">
        <div>预估收入</div>
      </template>
    </NavBar>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div class="c-k64ana">
        <div
          class="c-k64ana-list"
          v-for="item in list"
          :key="item.index"
          @click="handleMenu(item)"
        >
          <div
            class="c-k64ana-list-header flex-row flex-align-center flex-justify-between"
          >
            <div class="c-k64ana-list-header-title">
              {{ item.yearMonth | getYearMonth }}
            </div>
            <div class="c-k64ana-list-header-img">
              <van-icon name="arrow" />
            </div>
          </div>
          <div class="c-k64ana-list-item flex-row flex-align-center">
            <div>
              <div class="c-k64ana-list-item-text">新增保单(件)</div>
              <div class="c-k64ana-list-item-num">{{ item.policyCount }}</div>
            </div>
            <div>
              <div class="c-k64ana-list-item-text">累计保费(元)</div>
              <div class="c-k64ana-list-item-num">{{ item.annualPrem }}</div>
            </div>
            <div>
              <div class="c-k64ana-list-item-text">预估收入(元)</div>
              <div class="c-k64ana-list-item-num">{{ item.income }}</div>
            </div>
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>
<script>
import NavBar from '@/components/h5header'
import API from '@/services/h5/my'

export default {
  components: { NavBar },
  data() {
    return {
      list: [],
      curPage: 0,
      length: 10,
      loading: false,
      finished: false
    }
  },
  filters: {
    getYearMonth: function (value) {
      let data = value.split('-')
      return data[0] + '年' + Number(data[1]) + '月'
    }
  },
  methods: {
    async onLoad() {
      this.curPage += 1
      this.loading = true
      this.finished = false
      let params = {
        // length: this.length,
        curPage: this.curPage
      }
      const res = await API.getIncomByYearM(params)
      if (res && res.data && res.data.code === 1000) {
        this.list = this.list.concat(res.data.data.list)
        if (this.list.length < res.data.data.count) {
          this.loading = false
        } else {
          this.loading = false
          this.finished = true
          return
        }
      }
    },
    handleMenu(item) {
      this.$router.push(`/revenueDetail/${item.yearMonth}`)
    }
  }
}
</script>
<style lang="less" scoped>
.c-b5knjg {
  height: 100vh;
  background: #fafafa;
  box-sizing: border-box;
}
.c-k64ana {
  margin-top: 13px;
  padding: 0 15px;
  &-list {
    margin-bottom: 15px;
    border-radius: 5px;
    background: #fff;
    box-shadow: rgba(0, 0, 0, 0.07) 0 0 10px 0;
  }
  &-list-header {
    padding: 10px 15px;
    border-bottom: 0.5px solid #e5e5e5;
  }
  &-list-header-title {
    font-size: 18px;
    font-weight: bold;
    color: #000;
  }
  &-list-header-img {
    font-size: 18px;
  }
  &-list-item {
    padding: 15px;
  }
  &-list-item-text {
    font-size: 14px;
    color: #999;
    margin-right: 15px;
  }
  &-list-item-num {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-top: 10px;
    margin-right: 15px;
  }
}
</style>
